<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
<div>
    <audio controls autoplay></audio>
    <input onclick="startRecording()" type="button" value="录音" />
    <input onclick="stopRecording()" type="button" value="停止" />
    <input onclick="playRecording()" type="button" value="播放" />
    <input onclick="uploadAudio()" type="button" value="提交" />

    <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&amp;quality=100&amp;size=b4000_4000&amp;sec=1576026414&amp;di=4121c010940f72cab1cbcea65e698d0f&amp;src=http://hbimg.b0.upaiyun.com/b1cce6f996734bdbb9b3fb9ef7705deabc980e35493b-ysf8BZ_fw658" alt="图片加载失败" layer-index="0">
</div>

<script type="text/javascript" src="HZRecorder.js"></script>

<script>
    var word = "Hello, itbsl";
    alert(word);

    var recorder;
    var audio = document.querySelector('audio');
    function startRecording() {
        HZRecorder.get(function (rec) {
            recorder = rec;
            recorder.start();
        });
    }
    function stopRecording() {
        recorder.stop();
    }
    function playRecording() {
        recorder.play(audio);
    }
    function uploadAudio() {
        recorder.upload("UploadVideoServlet.do", function (state, e) {
            switch (state) {
                case 'uploading':
                    //var percentComplete = Math.round(e.loaded * 100 / e.total) + '%';
                    break;
                case 'ok':
                    //alert(e.target.responseText);
                    //alert("上传成功");
                    window.location.href="VideoSearchServlet.do";
                    break;
                case 'error':
                    alert("上传失败");
                    break;
                case 'cancel':
                    alert("上传被取消");
                    break;
            }
        });
    }

</script>
</body>
</html>